
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>地区API</title>
    <style type="text/css"> 
    div.block{
        width:672px;
        border: 1px dotted #64B224;
        background-color: oldlace;
        padding:10px;
        margin:10px 0;
    }
    div.code { 
        border: 1px dotted #64B224;
        background-color: #d3f3b8;
        white-space: normal; 
        margin:10px 0;
        padding:0 10px;
    } 
    pre { 
        white-space: pre-wrap; /*css-3*/ 
        white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
        white-space: -pre-wrap; /*Opera4-6*/ 
        white-space: -o-pre-wrap; /*Opera7*/ 
        word-wrap: break-word; /*InternetExplorer5.5+*/ 
    } 
</style>
    <script type="text/javascript" src="http://o84i1oviz.bkt.clouddn.com/data/resource/js/jquery.js?v1.2"></script>
    <script type="text/javascript" src="/static/area/area.js?v=1.0"></script>
    <script type="text/javascript">
        WYArea.init();
    </script>
</head>
<body>
    <div class="block">
        <h2>调用规范</h2>
        <div class="code">
            <pre>&lt;script type="text/javascript" src="/static/area/area.min.js?v=1.0"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    WYArea.init(function(){
        WYArea.select({
            def:281200,     //初始化结点 支持 地区编码/拼音/地区ID
            col:'code',     //select值使用哪个字段　可选值　code|aid|py，默认为code
            level : 3,      //联动级别
            prov:'#prov1',  //省对象
            city:'#city1',  //市对象
            area:'#area1',  //区对象
            init:function() {  }  //初始化结束回调
            change:function(val) {  }  //change回调事件，只对level指定的级别进行回调
        });
    });
});
&lt;/script&gt;
            </pre>
        </div>
    </div>
    <div class="block">
        <h2>获取地区字符串</h2>
        <input type='button' onclick="alert(WYArea.getAreaDataStr());" value='获取地区字符串'/>
        <div class="code">
            <pre>WYArea.getAreaDataStr();</pre>
        </div>
    </div>
    <div class="block">
        <h2>获取省份</h2>
        <input type='button' onclick="alert(WYArea.getProv());" value='获取省份'/> 
        <div class="code">
            <pre>WYArea.getProv();</pre>
        </div>
    </div>
    <div class="block">
        <h2>获取市</h2>
        <input type='button' onclick="alert(WYArea.getCity(280000));" value='获取市 280000'/> 
        <div class="code">
            <pre>WYArea.getCity(280000);</pre>
        </div>
    </div>
    <div class="block">
        <h2>获取区/县</h2>
        <input type='button' onclick="alert(WYArea.getArea(281200));" value='获取区/县 281200'/> 
        <div class="code">
            <pre>WYArea.getArea(281200);</pre>
        </div>
    </div>
    <div class="block">
        <h2>根据首字母获取市</h2>
        <input type='button' onclick="alert(WYArea.getByLetter('z', 1));" value='根据首字母获取市 z,1'/> 
        <div class="code">
            <pre>WYArea.getByLetter('z', 1);</pre>
        </div>
    </div>
    <div class="block">
        <h2>根据名称搜索</h2>
        <input type='button' onclick="alert(WYArea.getByName('州', 1));" value='根据名称搜索市 州'/> 
        <div class="code">
            <pre>WYArea.getByName('州', 1);</pre>
        </div>
    </div>
    <div class="block">
        <h2>获取单个结点</h2>
        <input type='button' onclick="alert(WYArea.getItemById(3115));" value='根据ID获取单个结点 3115'/> 
        <input type='button' onclick="alert(WYArea.getItemByCode(281202));" value='根据areacode获取单个结点 281202'/> 
        <input type='button' onclick="alert(WYArea.getItemByPY('wuhua'));" value='根据拼音获取单个结点 wuhua'/> 
        <div class="code">
<pre>
WYArea.getItemById(3115); 或者 WYArea.getItem(3115);
WYArea.getItemByCode(281202); 或者 WYArea.getItem(281202);
WYArea.getItemByPY('wuhua'); 或者 WYArea.getItem('wuhua');
</pre>
        </div>
    </div>
    <div class="block">
        <h2>获取结点树</h2>
        <input type='button' onclick="alert(WYArea.getPath(281200));" value='根据code获取结点树 281202'/> 
        <input type='button' onclick="alert(WYArea.getPath(3115));" value='根据ID获取结点树 3115'/> 
        <input type='button' onclick="alert(WYArea.getPath('wuhua'));" value='根据py获取结点树 wuhua'/> 
        <div class="code">
<pre>
WYArea.getPath(281200);
WYArea.getPath(3115);
WYArea.getPath('wuhua');
</pre>
        </div>
    </div>
    <div class="block">
        <h2>反解地区字符串为对象</h2>
        <input type='button' onclick="var item = WYArea.parser('2812001梅州市300meizhou');for(var i in item) alert(i + '=>' + item[i]);" value='反解地区字符串为对象 2812002梅州市300meizhou'/> 
        <div class="code">
<pre>
WYArea.parser('2812002梅州市300meizhou');
结果为：
{
    aid : 300,
    code : '2812001,
    grade : 1,
    name : 梅州,
    py : meizhou,
    letter : M
}
</pre>
        </div>
    </div>
    <div class="block">
        <h2>多级联动</h2>
        <input type='button' onclick="WYArea.select(280000);$(this).attr('disabled', true);" value='初始化联动 广东'/>
        <input type='button' onclick="WYArea.select(281200);$(this).attr('disabled', true);" value='初始化联动 广东 梅州'/>
        <input type='button' onclick="WYArea.select(281202);$(this).attr('disabled', true);" value='初始化联动 广东 梅州 五华县'/>
    
        <div id='areaContainer' style="margin-top:10px;">
            <select id='selectProv'></select>
            <select id='selectCity'></select>
            <select id='selectArea'></select>
        </div>
        <div class="code">
<pre>
WYArea.select(280000);
WYArea.select(281200);
WYArea.select(281202);
</pre>
        </div> 
        <h2>自定义联动</h2>
                <input type='button' onclick=" WYArea.select({def:281202, level: 3, prov:'#prov', city:'#city', area:'#area', first:'' });$(this).attr('disabled', true);" value='初始化联动 广东 梅州 五华县'/>
                <div id='areaContainer' style="margin-top:10px;">
                    <select id='prov'></select>
                    <select id='city'></select>
                    <select id='area'></select>
                </div>
        <div class="code">
<pre>
WYArea.select({
    def:281202,     //初始化的地区编码
    level : 3,     //联动级别
    prov:'#prov',  //省对象
    city:'#city',  //市对象
    area:'#area'   //区/县对象,
});
</pre>
        </div> 
                <h2>一级联动</h2>
                <input type='button' onclick="WYArea.select(280000, '#prov0');$(this).attr('disabled', true);" value='一级联动 广东'/>
                <div id='areaContainer' style="margin-top:10px;">
                    <select id='prov0'></select>
                </div>
        <div class="code">
<pre>
WYArea.select(280000, '#prov0');
或者
WYArea.select({
    def:280000,     //初始化的地区编码
    level : 1,     //联动级别
    prov:'#prov0',  //省对象
});
</pre>
        </div>
            <h2>二级联动</h2>
                <input type='button' onclick="WYArea.select(281200, '#prov1', '#city1');$(this).attr('disabled', true);" value='初始化联动 广东 梅州'/>
                <div id='areaContainer' style="margin-top:10px;">
                    <select id='prov1'></select>
                    <select id='city1'></select>
                </div>
        <div class="code">
<pre>
WYArea.select(281200, '#prov1', '#city1');
或者
WYArea.select({
    def:281200,     //初始化的地区编码
    level : 2,     //联动级别
    prov:'#prov1',  //省对象
    city:'#city1',  //市对象
});
</pre>
        </div>
                
                <h2>回调</h2>
                <input id='initBtn' type='button' onclick="doCallBackDemo();" value='初始化回调'/>
                <input id='changeBtn' type='button' onclick="$('#areacb').trigger('change');" value='change回调' disabled/>
                <div id='areaContainer' style="margin-top:10px;">
                    <select id='provcb'></select>
                    <select id='citycb'></select>
                    <select id='areacb'></select>
                </div>
        <div class="code">
<pre>
WYArea.select({
    def: 281202,     //初始化的地区编码
    level : 3,     //联动级别
    prov:'#provcb',  //省对象
    city:'#citycb',  //市对象
    area:'#areacb',  //市对象
    init : function () { //初始化回调
        $('#initBtn').val('初始化完成');
        $('#changeBtn').removeAttr('disabled');
    },
    change : function(val) {
        alert("值变更回调：" + val);
    }
});
</pre>
        </div>
    </div>
    <script type='text/javascript'>
        function doCallBackDemo()
        {
            WYArea.select({
                def: 281202,     //初始化的地区编码
                level : 3,     //联动级别
                prov:'#provcb',  //省对象
                city:'#citycb',  //市对象
                area:'#areacb',  //市对象
                init : function () { //初始化回调
                    $('#initBtn').val('初始化完成').attr('disabled', true);
                    $('#changeBtn').removeAttr('disabled');
                },
                change : function(val) {
                    alert("值变更回调：" + val);
                }
            });
        }
    </script>
</body>        
</html>